<template>
    <div class="container">
        <top-cmp></top-cmp>
        <header>
            <div class="nav navTop">
                <router-link to="/" tag="div" class="icon"></router-link>
                <!-- <div class="icon"></div> -->
                <div class="font">排行榜</div>
            </div>

            <div class="tabList">
                <div class="title">
                    <ul>
                        <li :class="num==0?'con':''" @click="num=0">众筹热度榜</li>
                        <li :class="num==1?'con':''" @click="num=1">创艺排榜榜</li>
                        <li :class="num==2?'con':''" @click="num=2">商城热销榜</li>
                    </ul>
                </div>
                <div class="content">
                    <ul>
                        <li :class="hournum==0?'con':''" @click="hournum=0">24小时</li>
                        <li :class="hournum==1?'con':''" @click="hournum=1">周榜单</li>
                        <li :class="hournum==2?'con':''" @click="hournum=2">总榜单</li>
                    </ul>
                </div>
            </div>
        </header>

        <div class="Lists" v-if="num==0">
            <ul>
                <li v-for="(item, index) in lists" :key="index">
                    <div class="left"><img src="../assets/img/paihangbang01.jpg" alt=""></div>
                    <div class="right">

                        <p class="title">
                            <span class="icon">{{ item.id }} </span>
                            {{ item.title }}
                        </p>
                        <div class="infoIcon">
                            <p><span></span>{{ item.good }}万</p>
                            <p><span></span>{{ item.phenum }}万</p>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="Lists" v-if="num==1">
            <ul>
                <li v-for="(item, index) in lists" :key="index">
                    <div class="left"><img src="../assets/img/2209101946YkGQO6PwR7jmzqm4lkzV9D0J5Lno34.jpg" alt=""></div>
                    <div class="right">

                        <p class="title">
                            <span class="icon">{{ item.id }} </span>
                            {{ item.title }}
                        </p>
                        <div class="infoIcon">
                            <p><span></span>{{ item.good }}万</p>
                            <p><span></span>{{ item.phenum }}万</p>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="Lists" v-if="num==2">
            <ul>
                <li v-for="(item, index) in lists" :key="index">
                    <div class="left"><img src="../assets/img/paihangbang01.jpg" alt=""></div>
                    <div class="right">

                        <p class="title">
                            <span class="icon">{{ item.id }} </span>
                            {{ item.title }}
                        </p>
                        <div class="infoIcon">
                            <p><span></span>{{ item.good }}万</p>
                            <p><span></span>{{ item.phenum }}万</p>
                        </div>
                    </div>
                </li>
            </ul>
        </div>

    </div>
</template>

<script>
import topCmp from '@/components/topCmp.vue';
export default {
    data() {
        return {
            num:0,
            hournum:0,
            lists: [
                {
                    id: 1,
                    title: "终极米迷 30周年百本 终极收藏版[摩点首发]",
                    good: "196.5",
                    phenum: 117,
                },
                {
                    id: 2,
                    title: "终极米迷 30周年百本 终极收藏版[摩点首发]",
                    good: "126.5",
                    phenum: 196,
                },
                {
                    id: 3,
                    title: "终极米迷 30周年百本 终极收藏版[摩点首发]",
                    good: "196.5",
                    phenum: 117,
                },
                {
                    id: 4,
                    title: "终极米迷 30周年百本 终极收藏版[摩点首发]",
                    good: "196.5",
                    phenum: 117,
                },
                {
                    id: 5,
                    title: "终极米迷 30周年百本 终极收藏版[摩点首发]",
                    good: "196.5",
                    phenum: 117,
                },
                {
                    id: 6,
                    title: "终极米迷 30周年百本 终极收藏版[摩点首发]",
                    good: "196.5",
                    phenum: 117,
                },
                {
                    id: 7,
                    title: "终极米迷 30周年百本 终极收藏版[摩点首发]",
                    good: "196.5",
                    phenum: 117,
                },
                {
                    id: 8,
                    title: "终极米迷 30周年百本 终极收藏版[摩点首发]",
                    good: "196.5",
                    phenum: 117,
                },
                {
                    id: 9,
                    title: "终极米迷 30周年百本 终极收藏版[摩点首发]",
                    good: "196.5",
                    phenum: 117,
                },
                {
                    id: 10,
                    title: "终极米迷 30周年百本 终极收藏版[摩点首发]",
                    good: "196.5",
                    phenum: 117,
                },
            ]
        };
    },
    methods:{

    },
    components: {
        topCmp
    }
}
</script>

<style lang="scss">
header{
}
.tabList {
    height: 74px;
    border-top: 2px solid #f5f5f5;
    border-bottom: 2px solid #f5f5f5;
    // position: fixed;
    background-color: #fff;

    .title {
        height: 35px;
        line-height: 35px;

        ul {
            display: flex;
            margin-left: 3px;

            li {
                width: 87px;
                height: 35px;
                text-align: center;
                font-size: 14px;
                position: relative;
            }

            li.con::after {
                content: "";
                border-bottom: 3px solid #5c5c5c;
                width: 24px;
                position: absolute;
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);
            }
        }
    }

    .content {
        height: 40px;

        ul {
            display: flex;
            margin-top: 11px;
            margin-left: 13px;

            li {
                box-sizing: border-box;
                font-size: 11px;
                text-align: center;
                margin-right: 5px;
                color: #6a6c71;
                width: 48px;
                height: 17px;
                line-height: 17px;
                background-color: #f2f2f2;
                border-radius: 24px;
            }

            li.con {
                border: 2px solid #d8d8d8;
                color: #2a2d37;

            }
        }
    }
}

.Lists {
    display: flex;

    ul {

        li {
            height: 127px;

            display: flex;
            padding: 20px 15px 0px 15px;

            .left {
                width: 166px;
                height: 118px;
            }

            .right {
                margin-left: 12px;
                position: relative;

                .title {

                    width: 100%;
                    font-size: 14px;
                    font-weight: 500;
                    color: #1a1a1a;
                    line-height: 25px;
                    word-break: break-all;


                    .icon {
                        background: linear-gradient(1turn, #1a1a1a, #453f2f);
                        padding-left: 20px;
                        margin-right: 10px;
                        font-size: 10px;
                        font-weight: 700;
                        color: #fee5a0;
                        line-height: 10px;
                        text-indent: 10px;
                        position: relative;

                        &::after {
                            content: "";
                            position: absolute;
                            width: 10px;
                            height: 9px;
                            left: 5px;
                            top: 50%;
                            transform: translateY(-50%);
                            background: url(https://p6.moimg.net/mdwxapp/ranking_list_king_gold.png) no-repeat 50%;
                            background-size: 100%;
                        }
                    }
                }

                .infoIcon {
                    color: #d5d5d5;
                    font-size: 11px;
                    display: flex;
                    position: absolute;
                    bottom: 14px;
                    left: 13px;

                    p {
                        padding-right: 17px;
                    }

                    p>span {
                        padding: 8px;
                        background: url("../assets/img/project_list_money_icon.png")no-repeat center center;
                        background-size: 100%;
                    }
                }
            }
        }
    }
}
</style>